<template>
    <div class="login">
        <div class="top">登录</div>

        <div class="logo flexc">
            <img src="@/assets/login_logo.png" alt="">
        </div>

        <div class="login-info flexv">
            <div class="login-init flex">
                <span class="id-img flex">
                    <img src="@/assets/id-ico.png" alt="" v-if="!tel">
                    <img src="@/assets/id-ico-on.png" alt="" v-else>
                </span>
                <input type="tel" placeholder="请输入手机号码" class="flex1" v-model="tel">
            </div>
            <div class="login-init flex">
                <span class="pwd-img flex">
                    <img src="@/assets/pwd-ico.png" alt="" v-if="!pwd">
                    <img src="@/assets/pwd-ico-on.png" alt="" v-else>
                </span>
                <input type="password" placeholder="请输入密码" class="flex1" v-model="pwd">
            </div>

            <div class="login-btn" @click="login">登录</div>
        </div>

        <div class="help-btns flex flexc">
            <router-link class="help-btn" :to="'/register'">我要注册</router-link>
            <router-link class="help-btn" :to="'/forgotPw'">忘记密码?</router-link>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast } from 'vant';
export default {
    data(){
        return{
            tel: null,
            pwd: null,
        }
    },
    watch: {
        tel(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.tel)){
                this.tel = null
                this.id = true
            }
        },
        pwd(newVal, oldVal){
            if(!(/^[A-Za-z0-9]+$/).test(this.pwd)){
                this.pwd = null
                this.on = true
            }
        },
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        login(){
            const that = this;
            if(!this.tel){
                Toast({
                    duration: 1800,
                    message: '请输入手机号'
                })
                return
            }
            if(!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)){
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if(!this.pwd){
                Toast({
                    duration: 1800,
                    message: '请输入密码'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Login&a=login', {
                params: {
                    mobile: this.tel,
                    pwd: this.pwd
                }
            }).then(res => {
                if(res.data.code == 200){
                    Toast({
                        duration: 1800,
                        message: '登录成功'
                    })
                    const data = res.data.data.uid;
                    console.log(data);
                    let userInfo = {
                        uid: data.id, // 用户id(密文)
                        // user_id: avatar.id,// 用户id(明文)
                        avatar: data.avatar, // 头像
                        nickname: data.nickname, // 昵称
                        // sex: info.sex == 1 ? '男' : '女',
                        // birthday: info.birthday,
                        mobile: data.mobile,//用户手机号
                        // issetpass: data.is_set_pay_pwd, // 是否设置了支付密码， 0未设置， 1设置了
                    }
                    // 存sessionStorage/更新vuex
                    sessionStorage.setItem('user', JSON.stringify(userInfo)); 
                    this.$store.commit('updateUser', userInfo);
                    setTimeout(function(){
                        that.$router.replace('/')
                    },2000)
                }else{
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.login{
    min-height: 100vh;
    background-color: #fff;
    .top{
        width: 100%;
        height: 0.88rem;
        border-bottom: 1px solid #dcdcdc;
        font-size: 0.34rem;
        text-align: center;
        font-weight: bold;
        line-height: 0.88rem;
        color: #333;
    }
    .logo{
        width: 100%;
        height: 3.62rem;
        img {
            width: 1.6rem;
            height: 1.72rem;
        }
    }
    .login-info{
        width: 100%;
        height: auto;
        .login-init{
            width: 6rem;
            height: 1.1rem;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
            .id-img{
                width: 0.35rem;
                height: 0.35rem;
                margin: auto 0.28rem auto 0;
            }
            .pwd-img{
                width: 0.3rem;
                height: 0.35rem;
                margin: auto 0.28rem auto 0;
            }
            input{
                border: none;
                font-size: 0.28rem;
                line-height: 1.1rem;
                color: #333;
            }
        }
        .login-btn {
            width: 6rem;
            height: 0.88rem;
            margin: 0.5rem auto 0;
            border-radius: 0.1rem;
            font-size: 0.32rem;
            line-height: 0.88rem;;
            text-align: center;
            color: #fff;
            background-color: #0497ec;
            cursor: pointer;
        }
    }
    .help-btns {
        height: 0.3rem;
        margin-top: 0.4rem;
        font-size: 0.24rem;
        line-height: 0.3rem;
        color: #808080;
        .help-btn {
            width: 1.4rem;
            height: auto;
            text-align: center;
        }
        .help-btn:first-child{
            border-right: 1px solid #d1ced1;
        }
    }
}
</style>

